<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <link rel="stylesheet" href="css_three.css">
</head>
<body>
    <h1>CSS选择器</h1>
    <h2>通用选择器</h2>
    <div id="main">ID选择器</div>
    <p class="news_title">类选择器</p>
    <h3>元素选着器</h3>
    <p data-bind>属性选择器：属性名“date-bind”</p>
    <p title="abc">属性选择器：title值为“abc”</p>
    <p title="ab cd">属性选择器：title包含“cd”：</p>
    <p title="xzy-abc">属性选择器：title值以“xyz”开始</p>
    <a href="#">链接一</a>
    <a href="#" title>链接二</a>
    <ul>
        <li>背景</li>
        <li>改变</li>
        <li>颜色</li>
    </ul>
    姓名:<input type="text">
    籍贯<input type="text">
    <div>
        <pre>第一个pre</pre>
        <pre>第二个pre</pre>
    </div>
    <div>
        <h1>伪元素</h1>
        <p>
            第一行<br>
            第二行
        </p>
    </div>
    <div>
        <span>后代选择器</span>
        <pre>
            <span>后代选择器</span>
        </pre>
    </div>
    <p>
        <span>子元素选择器</span>
        <pre>
            <span>子元素选择器</span>
        </pre>
    </p>
    <pre>相邻兄弟选择器</pre>
    <span>相邻兄弟</span><span>普通兄弟</span><span>普通兄弟</span>


    <pre>相邻兄弟选择器</pre>
    <span class="pro">相邻兄弟</span><span class="pro">普通兄弟</span><span class="pro">普通兄弟</span>
    <br>
    <a href="../index.html">返回首页</a>
</body>
</html>